<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5电子书翻页动画特效</title>
<link rel="stylesheet" type="text/css" href="css/book.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/book.js"></script>
</head>
<body class="mkeBody">
<div class="mkeHeadBox">HTML5电子书翻页动画特效</div>
<div class="mkeContentBox">
<!--效果html开始-->
<section id="knowledge" class="viewBlock">
  <div class="bookBox"> <a class="lastBtn"><</a> <a class="nextBtn">></a>
    <div class="bookPage frist"> <img src="img/dataImg1.png" /> </div>
    <div class="bookPage runPage">
      <div class="bookWord"> <span>Glacier</span> red in the glacier. <span class="pageNumber">1</span> </div>
      <img src="img/dataImg2.png" /> </div>
    <div class="bookPage runPage">
      <div class="bookWord"> <span>Surface</span> water supply, the . <span class="pageNumber">2</span> </div>
      <img src="img/dataImg3.png" /> </div>
    <div class="bookPage runPage">
      <div class="bookWord"> <span>Groundwater</span>itions, good . <span class="pageNumber">3</span> </div>
      <img src="img/dataImg4.png" /> </div>
    <div class="bookPage last">
      <div class="bookWord"> <span>Ocean</span>nts for only 2%.</span> <span class="pageNumber">4</span> </div>
    </div>
  </div>
</section>
<!--效果html结束-->
</div>
<div class="mkeFooterBox">
123
</body>
</html>
